<template>
  <div class="main">
    <div class="title">
      {{ title }}
    </div>
    <div class="content">
      <div class="list">
        <ul>
          <li v-for="(item, index) in  caseDataLi " :key="item._id">
            <div style="font-size: 16px;" v-html="'' + (index + 1) + '.' + item.content.replaceAll('\n', '<br>')"></div>
            <p></p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { Toast } from 'vant';

export default {
  data() {
    return {
      title: '',
      caseDataLi: []
    }
  },
  activated() {
    // 在组件创建时请求数据
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const examIndex = localStorage.getItem('examIndex')
      if (!examIndex) {
        Toast.fail('请先选择题库');
        return
      }
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      const fetch = () => {
        console.log('Fetch cases cache' + examIndex)
        this.title = localStorage.getItem('examName')
        const key = 'casesCache' + examIndex
        const cache = localStorage.getItem(key)
        if (cache) {
          this.caseDataLi = JSON.parse(cache)
          Toast.success('案例总数 ' + this.caseDataLi.length)
          console.log('Fetch cases 使用缓存 ' + key + ' ' + ', 总数：' + this.caseDataLi.length)
        } else {
          setTimeout(fetch, 1500)
        }
      }
      setTimeout(fetch, 0)
    },

    commit() {
      this.commited = !this.commited
      console.log(this.commited)
    },

    answerColorClass(item) {
      return (this.selected[item._id] && (this.selected[item._id].length > 1 ? this.selected[item._id].sort().join('') : this.selected[item._id]) === item.answer) ? 'text-green' : 'text-red'
    },
  },
}
</script>
<style lang="less" scoped>
.main {
  background: #fff;
  padding: 5vw;

  .title {
    font-weight: bold;
    color: #0074FF;
    font-size: 16px;
  }

  .content {
    padding: 5vw 0;
    text-align: left;

    .newspaper {
      color: #666666;
      margin-bottom: 5vw;
    }

    .list {
      .list-title {
        color: #666;
        line-height: 10vw;
      }

      .van-checkbox,
      .van-radio {
        .img-icon {
          width: 5vw;
        }

        padding:1vw 0;

        .van-checkbox__label {
          color: #666 !important;
        }

      }
    }
  }
}
</style>